<template>
    <section class="details-wrap" v-cloak>
        <match-bg 
            :teamA="bgInfo.teamA"
            :teamB="bgInfo.teamB"
            :matchTime="bgInfo.matchTime"
            :competition="bgInfo.competition"
            :status="bgInfo.status"
        />
        <van-tabs 
            v-model:active="active" 
            sticky 
            :offset-top="50"
            title-active-color="#16b13a"
            title-inactive-color="#333"
            color="#16b13a"
            animated
            swipeable
        >
            <van-tab title="赛况">
                <section v-if="status === 'Played' && events.length">
                <h3 class="matchd-title">
                    事件
                </h3>
                <event-title 
                    :teamA="bgInfo.teamA" 
                    :teamB="bgInfo.teamB" 
                />
                <match-line :events="events" />
                <div class="event-logo">
                    <span class="event-item">
                        <i class="event-icon icon-scoring"></i>
                        进球
                    </span>
                    <span class="event-item">
                        <i class="event-icon icon-scoring"></i>
                        点球
                    </span>
                    <span class="event-item">
                        <i class="event-icon icon-penaltyno"></i>
                        点球未进
                    </span>
                    <span class="event-item">
                        <i class="event-icon icon-own"></i>
                        乌龙球
                    </span>
                    <span class="event-item">
                        <i class="event-icon icon-assists"></i>
                        助攻
                    </span>
                </div>
                <h3 class="matchd-title">
                    技术统计
                </h3>
                <event-title 
                    :teamA="bgInfo.teamA" 
                    :teamB="bgInfo.teamB" 
                />
                <div class="count-main">
                    <data-percent 
                        v-for="statistic of statistics" 
                        :key="statistic.title" 
                        :title="statistic.title"
                        :teamAVal="statistic.teamAVal"
                        :teamBVal="statistic.teamBVal"
                        :teamAPer="statistic.teamAPer"
                        :teamBPer="statistic.teamBPer"
                    />
                </div>
                <h3 class="matchd-title">
                    相关新闻
                </h3>
                <news-item v-for="item of relatedNews" :key="item.id"  
                    :cover="item.thumb"
                    :title="item.title"
                    :cmtCount="item.commentsTotal"
                    :showcontent="item.showcontent"
                    :author="item.author_classify"
                    :top="item.top"
                    :label="item.label"
                    :id="item.id"
                />
                </section>
                <no-data v-else>
                    暂无比赛数据
                </no-data>
            </van-tab>
            <van-tab title="阵容">
                <section v-if="lineup.length">
                <h3 class="matchd-title">
                    首发阵容
                </h3>
                <div>
                    <against-item 
                        v-for="(item, i) of lineup" 
                        :key="'line-' + i" 
                        :teamA="item.team_A"
                        :teamB="item.team_B"
                        :class="[{'odd': i % 2}]"
                    />
                </div>
                <h3 class="matchd-title">
                    替补阵容
                </h3>
                <against-item 
                    v-for="(item, i) of sub" 
                    :key="'sub-' + i" 
                    :teamA="item.team_A"
                    :teamB="item.team_B"
                    :class="[{'odd': i % 2}]"
                />
                </section>
                <no-data v-else>
                    暂无比赛数据
                </no-data>
            </van-tab>
            <van-tab title="分析">
                <h3 class="matchd-title">
                    对赛往绩
                </h3>
                <battle-overview 
                    :teamA="overview.teamA"
                    :teamB="overview.teamB"
                    :win="overview.win"
                    :draw="overview.draw"
                    :lose="overview.lose"
                    :winPc="overview.winPc"
                    :drawPc="overview.drawPc"
                    :losePc="overview.losePc"
                /> 
                <battle-table 
                    :battleLists="battleLists"
                />

                <section v-if="rankA.length">
                <h3 class="matchd-title">
                    联赛积分榜
                </h3>
                <div class="analysis-team">
                    <img :src="bgInfo.teamA.logo" alt="">
                    {{ bgInfo.teamA.name }}
                </div>
                <rank-table :lists="rankA"></rank-table>
                </section>

                <section v-if="rankB.length">
                <div class="analysis-team">
                    <img :src="bgInfo.teamB.logo" alt="">
                    {{ bgInfo.teamB.name }}
                </div>
                <rank-table :lists="rankB"></rank-table>
                </section>

                <h3 class="matchd-title">
                    近期战绩
                </h3>
                <div class="analysis-team">
                    <img :src="bgInfo.teamA.logo" alt="">
                    {{ bgInfo.teamA.name }}
                </div>
                <battle-table 
                    :battleLists="historyA"
                    tag="1"
                />
                <div class="analysis-team">
                    <img :src="bgInfo.teamB.logo" alt="">
                    {{ bgInfo.teamB.name }}
                </div>
                <battle-table 
                    :battleLists="historyB"
                    tag="1"
                />
            </van-tab>
            <van-tab title="集锦">
                <section v-if="video">
                <h3 class="matchd-title">
                    战报
                </h3>
                <video :src="video" class="match-video" controls></video>
                </section>
                <no-data v-else>
                    暂无比赛数据
                </no-data>
            </van-tab>
        </van-tabs>
    </section>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, defineAsyncComponent } from 'vue';
import { useRoute } from 'vue-router';

import matchApi from '@/api/match';
import { UILoading, UILoaded } from '@/utils/ui';

const BattleOverview = defineAsyncComponent(() => import('./components/BattleOverview.vue'))
const NoMatchData = defineAsyncComponent(() => import('./components/NoData.vue'))
const AgainstItem = defineAsyncComponent(() => import('./components/AgainstItem.vue'))
const NewsItem = defineAsyncComponent(() => import('@/views/Home/NewsItem.vue'));
const DataPercent = defineAsyncComponent(() => import('./components/DataPercent.vue'))
const EventTitle = defineAsyncComponent(() => import('./components/EventTitle.vue'))
const MatchLine = defineAsyncComponent(() => import('./components/MatchLine.vue'))
const MatchBg = defineAsyncComponent(() => import('./components/MatchBg.vue'))
const BattleTable = defineAsyncComponent(() => import('./components/BattleTable.vue'))
const RankTable = defineAsyncComponent(() => import('./components/RankTable.vue'))

export default defineComponent({
    setup() {
        const route = useRoute();
        const active = ref(0);
        const list = new Array(50);

        const events = ref<any>([]); //事件数组
        const statistics = ref<any>([]); //技术统计
        const bgInfo = reactive<any>({
            teamA: null,
            teamB: null,
            matchTime: null,
            status: '',
            competition: ''
        }); //头部信息
        const relatedNews = ref<any>([]); //相关新闻
        const getSituation = async () => { //获取赛况
            UILoading();
            const res = await matchApi.getSituation(route.params.id as string);
            try {
                if (res.info.status === 'Played') { //已结束的比赛才有赛况内容
                    Object.values(res.info.events).map(event => {
                        events.value.push(event);
                    })
                    getStatistics(res.info.statistics.list);
                }
                relatedNews.value = res.info.relateArticle;
            } catch (e) {
                console.log(e)
            }
            getBgInfo(res);
            UILoaded(500);
        }

        const [lineup, sub] = [ref([] as Array<any>), ref([] as Array<any>)]; //首发&替补
        const getLineup = async () => { //获取阵容
            const res = await matchApi.getLineup(route.params.id as string);
            try {
                lineup.value = res.info.lineup;
                sub.value = res.info.sub;
                lineup.value.unshift({ //人员最前面插入队名
                    team_A: {
                        person: res.match.team_A.name,
                        person_logo: res.match.team_A.logo
                    },
                    team_B: {
                        person: res.match.team_B.name,
                        person_logo: res.match.team_B.logo
                    }
                })
            } catch (e) {
                console.log(e)
            }
        }

        const battleData: {
            overview: any,
            battleLists: Array<any>,
            historyA: Array<any>,
            historyB: Array<any>,
            rankA: Array<any>,
            rankB: Array<any>,
        } = reactive({ //交锋数据
            overview: null,
            battleLists: [],
            historyA: [],
            historyB: [],
            rankA: [],
            rankB: []
        })
        const getAnalysis = async () => { //数据分析
            const res = await matchApi.getAnalysis(route.params.id as string);
            
            try {
                battleData.overview = {
                    teamA: res.info.team_A,
                    teamB: res.info.team_B,
                    win: res.info.battle_history.team_A.win,
                    draw: res.info.battle_history.team_A.draw,
                    lose: res.info.battle_history.team_B.win,
                    winPc: res.info.battle_history.percent.win,
                    drawPc: res.info.battle_history.percent.draw,
                    losePc: res.info.battle_history.percent.lose,
                }

                battleData.battleLists = res.info.battle_history.list;
                battleData.historyA = res.info.recent_record.team_A;
                battleData.historyB = res.info.recent_record.team_B;

                battleData.rankA = Object.values(res.info.league_table.team_A);
                battleData.rankB = Object.values(res.info.league_table.team_B);
            } catch (e) {
                console.log(e)
            }
        }

        function getBgInfo(res: any) { //背景数据
            bgInfo.teamA = res.match.team_A;
            bgInfo.teamB = res.match.team_B;
            bgInfo.matchTime = {
                show_time_day: res.show_time_day,
                show_time_min: res.show_time_min
            },
            bgInfo.status = res.info.status;
            bgInfo.competition = res.match.competition.short_name;
        }

        function getStatistics(list: Array<any>) { //技术统计数据
            list.map((item) => {
                statistics.value.push({
                    title: item.type,
                    teamAVal: item.team_A.value,
                    teamBVal: item.team_B.value,
                    teamAPer: item.team_A.per,
                    teamBPer: item.team_B.per,
                })
            })
        }

        const hightLights: {
            video: null | string,
            gifs: Array<any>
        } = reactive({
            video: null,
            gifs: []
        })
        const getHighLights = async () => { //获取集锦
            const res = await matchApi.getHighlights(route.params.id as string);
            hightLights.video = res.info.article;
            hightLights.gifs = res.info.gifCollection;
        }

        getSituation();
        getLineup();
        getAnalysis();
        getHighLights();

        return {
            active,
            list,
            events,
            ...toRefs(bgInfo),
            bgInfo,
            statistics,
            relatedNews,
            lineup,
            sub,
            ...toRefs(battleData),
            battleData,
            ...toRefs(hightLights)
        }
    },
    components: {
        'match-bg': MatchBg,
        'match-line': MatchLine,
        'event-title': EventTitle,
        'data-percent': DataPercent,
        'news-item': NewsItem,
        'no-data': NoMatchData,
        'against-item': AgainstItem,
        'battle-overview': BattleOverview,
        'battle-table': BattleTable,
        'rank-table': RankTable
    }
})
</script>

<style scoped lang="scss">
    .details-wrap {
        padding: {
            top: 50px;
            // bottom: 50px;
        }
    }

    .count-main {
        padding-bottom: 20px;
        background: #f7f7f7;
        overflow: hidden;
    }
    .matchd-title {
        line-height: 30px;
        height: 30px;
        padding-left: 12px;
        font-size: 14px;
        background: #e8e8e8;
        font-weight: 700;
        margin: 0;
    }

    .event-logo {
        display: flex;
        background: $white2;
        .event-item {
            flex: 1;
            font-size: 12px;
            line-height: 2.5;
            text-align: center;
        }
    }

    .event-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 12px auto;
    }

    .icon-scoring {
        background-image: url();
    }
    .icon-penalty {
        background-image: url();
    }
    .icon-penaltyno {
        background-image: url();
    }
    .icon-own {
        background-image: url();
    }
    .icon-assists {
        background-image: url();
    }

    .analysis-team {
        font-size: 14px;
        padding: 10px 12px;
        img {
            width: 25px;
            height: 25px;
            vertical-align: middle;
            margin-right: 10px;
        }
    }
    .match-video {
        width: 100%;
        padding: 10px;
    }
</style>